<template>
  <div class="content">
    <div class="content-box">
      <div class="menu-list d-none d-sm-flex">
        <template>
          <v-treeview
            dense
            activatable
            active-class="active-style"
            color="#1983C6"
            item-key="id"
            :items="menuList"
            @update:active="changeVal"
          ></v-treeview>
        </template>
      </div>
      <div class="content-right">
        <div class="goods-list">
          <div v-for="item in goodsList" :key="item.id" class="item-box">
            <nuxt-link :to="{ name: 'productDetail', params: { id: item.id } }">
              <img :src="item.img" alt="" />
              <p>{{ item.name }}</p>
            </nuxt-link>
          </div>
        </div>
        <div class="d-none d-sm-flex">
          <div v-show="page.count > 0" class="pages-box">
            <Pagination
              :total="page.count < 10 ? 10 : page.count"
              @change="changePagination"
            ></Pagination>
          </div>
        </div>
      </div>
    </div>
    <p class="tips">{{ $t("tips") }}</p>
  </div>
</template>

<script>
import Pagination from '~/components//pagination.vue'
export default {
  components: {
    Pagination,
  },
  async asyncData({ store, $axios }) {
    const goods = await $axios.$post('goods/index', {
      language: store.state.locale,
      page: 1,
      rows: 10,
    })
    const menuData = await $axios.$post('goods/class',{
      language: store.state.locale,
    })
    return {
      page: JSON.parse(goods).data.pageinfo,
      menuList: JSON.parse(menuData).data,
      goodsList: JSON.parse(goods).data.data,
      current: 1,
    }
  },
  async created() {
    const equipment = localStorage.getItem('equipment')
    if (equipment == 'phone') {
      const goods = await this.$axios.$post('goods/index', {
        language: localStorage.getItem('lang'),
        page: 2,
        rows: 100000,
      })
      this.goodsList.concat(JSON.parse(goods).data.data)
    }
  },
  methods: {
    async getData() {
      const menuData = await this.$axios.$post('goods/class',{
        language: localStorage.getItem('lang'),
      })
      this.menuList = JSON.parse(menuData).data
    },
    async changePagination(current) {
      this.current = current
      const goods = await this.$axios.$post('goods/index', {
        language: localStorage.getItem('lang'),
        page: current,
        rows: 10,
      })
    },
    async changeVal(ids) {
      const id = ids[0]
      const goods = await this.$axios.$post('goods/index', {
        language: localStorage.getItem('lang'),
        page: 1,
        rows: 10,
        class_id: id,
      })
      this.goodsList = JSON.parse(goods).data.data
      this.page = JSON.parse(goods).data.pageinfo
    },
  },
  watch: {
    '$store.state.locale'() {
      this.getData()
    },
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  display: flex;
  box-sizing: border-box;

  .menu-list {
    cursor: default;
    min-width: 170px;
    .active-style {
      background: none;
    }
  }

  .content-right {
    flex: 1;

    .goods-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;

      .item-box {
        max-width: 96 / 5 * 1%;
        border: 1px solid#ddd;
        padding: 6px;
        margin-right: 1%;
        border-radius: 10px;
        margin-bottom: 1%;

        &:nth-of-type(5n) {
          margin-right: 0;
        }

        img {
          width: 100%;
          border-radius: 10px;
          margin-bottom: 10px;
        }

        p {
          padding: 0 10px;
          text-align: center;
          font-size: 12px;
          color: #333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-bottom: 0;
        }
      }
    }

    .pages-box {
      display: flex;
      justify-content: center;
      width: 100%;
    }
  }
}

.tips {
  text-align: center;
  padding: 20px 0;
}

@media screen and (max-width: 765px) {
  .item-box {
    max-width: 49% !important;
    &:nth-of-type(2n) {
      margin-right: 0 !important;
    }
  }
}
</style>
